import { highlight } from '@monorepo-starter/ui/composites/code-highlight/highlight-html';

const code = `
// [!code word:locale]
import type { Metadata } from 'next';
import { ThemeProvider } from 'next-themes';
import { NuqsAdapter } from 'nuqs/adapters/next/app';
import { getLocale } from '~/lib/i18n/locale';
import { PushNotificationProvider } from '~/lib/push/push-notification-provider';
import { TanstackQueryProvider } from '~/lib/zustand/tanstack-query-provider';
import { CounterStoreProvider } from '~/store/counter-provider';
import './globals.css'; // [!code warning]

import '@monorepo-starter/ui/globals.css'; // [!code error]

export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};

export default async function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const locale = await getLocale();

  return (
    <html lang={locale} suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
          <NuqsAdapter>
            <TanstackQueryProvider>
              {/* [!code highlight:3] */}
              <PushNotificationProvider>
                <CounterStoreProvider>{children}</CounterStoreProvider>
              </PushNotificationProvider>
            </TanstackQueryProvider>
          </NuqsAdapter>
        </ThemeProvider>
      </body>
    </html>
  );
}
`;

export default async function CodePage() {
  const html = await highlight(code, 'tsx');

  return (
    <div>
      <h1>Code Highlight HTML</h1>
      <p>서버 컴포넌트에서 정적 하이라이트 적용</p>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </div>
  );
}
